<template>
  <div class="house">
    <div class="house-head">
      <van-icon name="arrow-left" @click="goBack" />
      <h3>找房子</h3>
    </div>
    <div class="house-search-result">
      <div class="result-show">
        <van-tabs v-model="active" @click="changeType">
          <van-tab v-for="(item, index) in typeList" :key="index" :title="item">
            <ul class="result-box">
              <li
                class="result-item"
                v-for="item in list"
                :key="item.id"
                @click="jump(item.id)"
              >
                <div class="item-left">
                  <img :src="'http://124.93.196.45:10001' + item.pic" />
                </div>
                <div class="item-right">
                  <h3>{{ item.description }}</h3>
                  <p>
                    {{ item.houseType }} <span>{{ item.price }}</span>
                    {{ item.areaSize }}㎡
                  </p>
                  <p>{{ item.address }}</p>
                  <p>联系电话：{{ item.tel }}</p>
                </div>
              </li>
            </ul>
            <van-pagination
              v-model="currentPage"
              :page-count="totalPage"
              mode="simple"
              @change="changPage"
            ></van-pagination>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getHouseDate } from "@/service/houseService";
export default {
  data() {
    return {
      active: 0,
      typeList: ["全部", "二手", "中介", "租房", "楼盘"],
      list: [], //房源列表
      total: "",
      value: "", //搜索
      currentPage: 1,
      totalPage: "",
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    jump(id) {
      this.$router.push(`detail?id=${id}`);
    },
    changPage(page) {
      this.getBannerList({
        houseType: this.value,
        pageNum: page,
        pageSize: 10,
      });
    },
    changeType(title) {
      this.currentPage = 1;
      const options = {
        houseType: title === 0 ? "" : this.typeList[title],
        pageNum: 1,
        pageSize: 10,
      };
      this.getBannerList(options);
    },
    async getBannerList(
      options = { sourceName: "", houseType: "", pageNum: 1, pageSize: 10 }
    ) {
      const { data } = (await getHouseDate(options)) || {};
      // console.log(data);
      if (data.code !== 200) this.$toast(`${data.msg}`);
      this.list = data.rows;
      this.total = data.total;
      this.totalPage = Math.ceil(this.total / 20);
      // console.log(this.list, this.total);
    },
  },
  created() {
    this.getBannerList();
  },
};
</script>

<style lang="scss" scoped>
.house {
  .house-head {
    position: relative;
    color: #fff;
    background: #52a1fe;
    h3 {
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
    i {
      position: absolute;
      left: 10px;
      top: 15px;
      font-size: 30px;
    }
  }
  .house-search {
    position: sticky;
    top: 0;
    display: flex;
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #4fc08d;
      color: #fff;
    }
    .van-search {
      flex: 1;
    }
  }
  .house-search-result {
    padding: 10px;
    .result-show {
      h3 {
        font-size: 18px;
        span {
          font-size: 14px;
          font-weight: 0;
          margin-left: 30px;
        }
      }
    }
    .result-box {
      .result-item {
        width: 100%;
        height: 120px;
        border-bottom: 1px solid #eee;
        padding-top: 10px;
        padding-bottom: 20px;
        display: flex;
        .item-left {
          margin: auto;
          width: 100px;
          img {
            height: 100px;
            width: 100px;
          }
        }
        .item-right {
          padding-left: 10px;
          padding-right: 10px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h3 {
            font-size: 16px;
            line-height: 20px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            span {
              font-size: 18px;
              font-weight: 600;
              color: red;
              margin-left: 30px;
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
